<template>
  <div class="page-container">
    <el-form
      ref="form"
      class="form-container"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <img
        class="logo-img"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa8e3810f-1ff7-4839-9e67-5177b336ced9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701097460&t=2e29c0689f8d124b0dc20aa4231d9b63"
        alt=""
      >
      <el-form-item
        class="form-cell"
        label="用户"
      >
        <el-input
          v-model="form.name"
          prefix-icon="el-icon-user"
          style="width: 85%"
          clearable
          placeholder="jay"
        />
      </el-form-item>
      <el-form-item
        class="form-cell"
        label="密码"
        prop="psw"
      >
        <el-input
          v-model="form.psw"
          type="password"
          prefix-icon="el-icon-key"
          show-password
          style="width: 85%"
          placeholder="jay123"
        />
      </el-form-item>
      <el-form-item class="form-cell">
        <el-button
          class="block-btn"
          type="primary"
          @click="handlerLogin"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
    <!-- <el-button>登录{{ userinfo.name }}</el-button> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "Login",
    data() {
        let validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            }
            else callback()
        };
        return {
            form: {
                name: "",
                psw: "",
            },
            rules: {
                psw: [{ validator: validatePass, trigger: ["blur", "change"] }],
            },
        };
    },
    computed: {
        ...mapState("userinfo", ["userinfo"]),
    },
    methods: {
        handlerLogin(){
            console.log(this.form);
            this.$refs.form.validate(valid => {
                console.log(valid);
                if (valid) {
                    this.$store.dispatch("commonLogin/login", this.form).then(res => {
                        console.log(res);
                        const { code } =  res
                        const {redirect} = this.$route.query
                        console.log(redirect)
                        if(code === 200) this.$router.replace("/")
                    })
                }
                else {
                    this.$message.error("请输入用户名和密码")
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .form-container {
        width: 400px;
        height: 450px;
        box-shadow: 0 0 6px #e8e8e8;
        border-radius: 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;

        // align-items: center;
        .logo-img {
            width: 100px;
            height: 100px;
            object-fit: contain;
            border-radius: 50%;
            background: #000;
            margin: 0 auto;
        }

        .form-cell {
            width: 100%;
            margin: 16px auto;
        }

        .block-btn {
            width: 80%;
            border-radius: 22px;
        }
    }
}
</style>
